import React, { Component, Suspense, lazy } from 'react';
import { withRouter, NavLink, Switch, Redirect, Route, BrowserRouter as Router } from 'react-router-dom';

const Zhu = lazy(() => import('./view/App'))
const Home = lazy(() => import('./view/home/ace'));
const Info = lazy(() => import('./view/about/info'));
const Detail = lazy(() => import('./view/about/detail'));
const Shop = lazy(() => import('./view/shop/Fath'))
const Tab = lazy(() => import('./view/5-10/Tab'))
const Fenye = lazy(() => import('./view/5-10/分页/App'))
const Home11 = lazy(() => import('./view/5-11/Home'))
const Start = lazy(() => import('./view/StorePage/index'))
const Starts = lazy(() => import('./view/StorePage/App2'))
const Sx = lazy(() => import('./view/StorePage/App'))
const Store513 = lazy(() => import('./view/5-13/Top'))
const Store514 =lazy(()=>import('./view/5-14/store'))
const W531 = lazy(()=>import('./view/5-31/App'))
const Kao = lazy(()=>import('./view/考试/App'))

/*
router 使用 path component
Router 使用
exact 精准匹配
非法url 跳到那个位置 Redirect
*/
/*
模板页面
排版一样 内容不一样
ID
动态的url
*/

class App extends Component {
    render() {
        return (
            <Router>
                <Suspense fallback={<div> Loading... </div>}>
                    <Switch>
                        <Route exact path='/' component={Zhu}></Route>
                        <Route path='/home' component={Home}></Route>
                        <Route path="/home11" component={Home11} />
                        <Route path="/tab" component={Tab} />
                        <Route path="/fenye" component={Fenye} />
                        <Route path='/info' component={Info}></Route>
                        <Route path='/about' component={Detail}></Route>
                        <Route path='/shop' component={Shop}></Route>

                        <Route path="/start" component={Start} /> 
                        <Route path="/starts" component={Starts} />
                        <Route path='/sx' component={Sx} />
                        <Route path='/s513' component={Store513}></Route>
                        <Route path='/s514' component={Store514} />
                        <Route path='/531' component={W531}></Route>
                        <Route path='/kao' component={Kao}/>
                        {/* path 自定义的 url 
                            component 组件  
                            精准匹配到我设置的这个url  */}
                        {/* <Route path={`/shop/:id`} component={Shop}></Route>
                        <Route path={`/info/:token`} component={Info}></Route> */}
                        <Redirect to='/'></Redirect>
                    </Switch>
                </Suspense>
            </Router>
        );
    }
}
export default App;